<template>
  <div>
    <div class="ls_maincont"></div>
    <div class="mainDiv yj">
      <div class="r">
        <div class="stage_c_r main_3 yj_c">
          <div class="t">
            <div class="react">
              <i class="l_up"></i>
              <i class="l_down"></i>
              <i class="r_up"></i>
              <i class="r_down"></i>
              <div class="title">
                <span style="color: white; font-size: 30px;">锅炉运行智能预警</span>
              </div>
            </div>
          </div>
          <div class="d d2">
            <!-- 燃烧温度 -->
            <div class="yj_item">
              <h1 style="color: white; font-size: 30px;">燃烧温度</h1>
              <p>
                <span class="wendu">A1 </span>
                <span class="wendu">A2 </span>
                <span class="wendu">A3 </span>
                <span class="wendu">A4 </span>
              </p>
              <p>
                <span class="wendu">B1 </span>
                <span class="wendu">B2 </span>
                <span class="wendu">B3 </span>
                <span class="wendu">B4 </span>
              </p>
              <p>
                <span class="wendu">C1 </span>
                <span class="wendu">C2 </span>
                <span class="wendu">C3 </span>
                <span class="wendu">C4 </span>
              </p>
              <p>
                <span class="wendu">D1 </span>
                <span class="wendu">D2 </span>
                <span class="wendu">D3 </span>
                <span class="wendu">D4 </span>
              </p>
              <p>
                <span class="wendu">E1  </span>
                <span class="wendu">E2 </span>
                <span class="wendu">E3 </span>
                <span class="wendu">E4 </span>
              </p>
            </div>
            <!-- 燃烧状态 -->
            <div class="yj_item">
              <h1 style="color: white; font-size: 30px;">燃烧稳定性</h1>
              <p>
                <span class="ranshao">A1 </span>
                <span class="ranshao">A2 </span>
                <span class="ranshao">A3 </span>
                <span class="ranshao">A4 </span>
              </p>
              <p>
                <span class="ranshao">B1 </span>
                <span class="ranshao">B2 </span>
                <span class="ranshao">B3 </span>
                <span class="ranshao">B4 </span>
              </p>
              <p>
                <span class="ranshao">C1 </span>
                <span class="ranshao">C2 </span>
                <span class="ranshao">C3 </span>
                <span class="ranshao">C4 </span>
              </p>
              <p>
                <span class="ranshao">D1 </span>
                <span class="ranshao">D2 </span>
                <span class="ranshao">D3 </span>
                <span class="ranshao">D4 </span>
              </p>
              <p>
                <span class="ranshao">E1 </span>
                <span class="ranshao">E2 </span>
                <span class="ranshao">E3 </span>
                <span class="ranshao">E4 </span>
              </p>
            </div>
            <!--着火距离  -->
            <div class="yj_item">
              <h1 style="color: white; font-size: 30px;">着火距离</h1>
              <p>
                <span class="zhaohuo">A1 </span>
                <span class="zhaohuo">A2 </span>
                <span class="zhaohuo">A3 {{distance[2]}}</span>
                <span class="zhaohuo">A4 {{distance[3]}}</span>
              </p>
              <p>
                <span class="zhaohuo">B1 {{distance[4]}}</span>
                <span class="zhaohuo">B2 {{distance[5]}}</span>
                <span class="zhaohuo">B3  {{distance[6]}}</span>
                <span class="zhaohuo">B4 {{distance[7]}}</span>
              </p>
              <p>
                <span class="zhaohuo">C1 {{distance[8]}}</span>
                <span class="zhaohuo">C2 {{distance[9]}}</span>
                <span class="zhaohuo">C3 {{distance[10]}}</span>
                <span class="zhaohuo">C3 {{distance[11]}}</span>
              </p>
              <p>
                <span class="zhaohuo">D1 {{distance[12]}}</span>
                <span class="zhaohuo">D2 {{distance[13]}}</span>
                <span class="zhaohuo">D3 {{distance[14]}}</span>
                <span class="zhaohuo">D4 {{distance[15]}}</span>
              </p>
              <p>
                <span class="zhaohuo">E1 {{distance[16]}}</span>
                <span class="zhaohuo">E2 {{distance[17]}}</span>
                <span class="zhaohuo">E3 {{distance[18]}}</span>
                <span class="zhaohuo">E4 {{distance[19]}}</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="stage_t">
      <div class="stage_t_left">
        <img src="../assets/logins.jpg" alt=""> <span>国能怀安热电有限公司</span>
      </div>
      <div class="stage_t_zhong">燃烧数字化监测与可视化系统</div>
      <div class="stage_t_right">
        <img src="../assets/timer.png" alt=""> <span>{{ nowTime }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { formatTime } from "../utils/date.js";
import { postshouyewenduapi } from "../api/index.js";
import { zIndexContextKey } from "element-plus";
const nowTime = ref("");
onMounted(() => {
  setInterval(() => {
    nowTime.value = formatTime(new Date());
  });
  // /////////////////
  obj()
});
// 温度报警
let waining0wendu = ref([])
let temperature = ref([])
// 燃烧稳性
let ranshaozhuandingxingwaining= ref([]);
let stability = ref([])
// 着火距离报警
let waining0zhaohu = ref([]);
// 距离
let distance = ref([])
let timer = 0
let obj = async () => {
  clearInterval(timer);
  let res = await postshouyewenduapi();
  // let ress= await postshouyewenduapi();
  waining0wendu.value=[];
  ranshaozhuandingxingwaining.value=[];
  waining0zhaohu.value=[];
  res.data.warnings0.map(item => {
    waining0wendu.value.push(item)
  })
  res.data.warnings2.map(item => {
        ranshaozhuandingxingwaining.value.push(item)
  })
  res.data.warnings1.map(item => {
        waining0zhaohu.value.push(item)
    })
  let wendudiv = document.getElementsByClassName("wendu");
  [...wendudiv].forEach((item,index) => {
    if (waining0wendu.value[index] === 0) {
      item.style.color = "green";
      } else if (waining0wendu.value[index] === 1) {
        item.style.color = "yellow";
      } else if (waining0wendu.value[index] === 2) {
        item.style.color = "red";
      }
  });

  //燃烧
  let ranshaodiv = document.getElementsByClassName("ranshao");
  [...ranshaodiv].forEach((item,index) => {
    if (ranshaozhuandingxingwaining.value[index] === 0) {
      item.style.color = "green";
      } else if (ranshaozhuandingxingwaining.value[index] === 1) {
        item.style.color = "yellow";
      } else if (ranshaozhuandingxingwaining.value[index] === 2) {
        item.style.color = "red";
      }
  });

  //着火距离
  let ZHaoHuodiv = document.getElementsByClassName("zhaohuo");
  [...ZHaoHuodiv].forEach((item,index) => {
    if (waining0zhaohu.value[index] === 0) {
      item.style.color = "green";
      } else if (waining0zhaohu.value[index] === 1) {
        item.style.color = "yellow";
      } else if (waining0zhaohu.value[index] === 2) {
        item.style.color = "red";
      }
  });



  timer = setTimeout(() => {
      obj();
  }, 1000);
};

</script>

<style lang="scss" scoped></style>